$(document).ready - Code Metrics - Inspection of "postMessage refactor" - aristath/kirki - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#1708)

by Aristeides

created 2018-03-17 10:54 UTC

$(document).ready A

↳ Parent: $(document).ready

Complexity

Conditions	1
Paths	2

Size

Total Lines

Duplication

Lines	0
Ratio	0 %

Importance

Changes	3
Bugs	0	Features	0

Metric	Value
cc	1
c	3
b	0
f	0
nc	2
nop	1
dl	0
loc	16
rs	9.4285

/* global kirkiPostMessageFields, WebFont */
var kirkiPostMessage = {
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

	/**
	 * The fields.
	 *
	 * @since 3.0.20
	 */
	fields: {},

	/**
	 * A collection of methods for the <style> tags.
	 *
	 * @since 3.0.20
	 */
	styleTag: {

		/**
		 * Add a <style> tag in <head> if it doesn't already exist.
		 *
		 * @since 3.0.20
		 * @param {string} id - The field-ID.
		 * @returns {void}
		 */
		add: function( id ) {
			if ( null === document.getElementById( 'kirki-postmessage-' + id ) || 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
				jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
			}
		},

		/**
		 * Add a <style> tag in <head> if it doesn't already exist,
		 * by calling the this.add method, and then add styles inside it.
		 *
		 * @since 3.0.20
		 * @param {string} id - The field-ID.
		 * @param {string} styles - The styles to add.
		 * @returns {void}
		 */
		addData: function( id, styles ) {
			kirkiPostMessage.styleTag.add( id );
			jQuery( '#kirki-postmessage-' + id ).text( styles );
		}
	},

	/**
	 * Common utilities.
	 *
	 * @since 3.0.21
	 */
	util: {

		/**
		 * Processes the value and applies any replacements and/or additions.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.

		 * @returns {string}
		 */
		processValue: function( output, value ) {
			var settings = window.parent.wp.customize.get();
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console

			if ( 'string' !== typeof value ) {
				return value;
			}
			output = _.defaults( output, {

				prefix: '',
				units: '',
				suffix: '',
				value_pattern: '$',
				pattern_replace: {}
			} );

			value = output.value_pattern.replace( /$/g, value );

			_.each( output.pattern_replace, function( placeholder, id ) {
				if ( ! _.isUndefined( settings[ id ] ) ) {
					value = value.replace( placeholder, settings[ id ] );

				}
			} );
			return output.prefix + output.units + value + output.suffix;
		},

		/**
		 * Make sure urls are properly formatted for background-image properties.
		 *
		 * @since 3.0.21
		 * @param {string} url - The URL.
		 * @returns {string}
		 */
		backgroundImageValue: function( url ) {
			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
		}
	},

	/**
	 * A collection of utilities for CSS generation.
	 *
	 * @since 3.0.21
	 */
	css: {

		/**
		 * Generates the CSS from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @param {string} controlType - The control-type.
		 * @returns {string}
		 */
		fromOutput: function( output, value, controlType ) {
			var styles      = '',
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				kirkiParent = window.parent.kirki,
				googleFont  = '';

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}
			switch ( controlType ) {
				case 'kirki-typography':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
					} );
					styles += '}';

					// Check if this is a googlefont so that we may load it.
					if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {

						// Calculate the googlefont params.
						googleFont = value['font-family'].replace( /\"/g, '&quot;' );
						if ( value.variant ) {
							if ( 'regular' === value.variant ) {
								googleFont += ':400';
							} else if ( 'italic' === value.variant ) {
								googleFont += ':400i';
							} else {
								googleFont += ':' + value.variant;
							}
						}
						googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
						WebFont.load( {
							google: {
								families: [ googleFont ]
							}
						} );
					}
					break;
				case 'kirki-background':
				case 'kirki-dimensions':
				case 'kirki-multicolor':
				case 'kirki-sortable':
					styles += output.element + '{';
					_.each( value, function( val, key ) {
						if ( output.choice && key !== output.choice ) {
							return;
						}
						if ( 'background-image' === key ) {
							val = kirkiPostMessage.util.backgroundImageValue( val );

						}

						// Mostly used for padding, margin & position properties.
						if ( output.property && '' !== output.property && ( 'top' === key || 'bottom' === key || 'left' === key || 'right' === key ) ) {
							styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
						} else {
							styles += key + ':' + kirkiPostMessage.util.processValue( output, val ); +';';
						}
					} );
					styles += '}';
					break;
				default:
					if ( 'kirki-image' === controlType ) {
						value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );

					}
					styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
					break;
			}
			return styles;
		}
	},

	/**
	 * A collection of utilities to change the HTML in the document.
	 *
	 * @since 3.0.21
	 */
	html: {

		/**
		 * Modifies the HTML from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {

			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
				value = window[ output.js_callback[0] ]( value, output.js_callback[1] );

			}

			if ( _.isObject( value ) || _.isArray( value ) ) {
				if ( ! output.choice ) {
					return;
				}
				_.each( value, function( val, key ) {
					if ( output.choice && key !== output.choice ) {
						return;
					}
					value = val;

				} );
			}
			value = kirkiPostMessage.util.processValue( output, value );

			if ( output.attr ) {
				jQuery( output.element ).attr( output.attr, value );
			} else {
				jQuery( output.element ).html( value );
			}
		}
	},

	/**
	 * A collection of utilities to allow toggling a CSS class.
	 *
	 * @since 3.0.21
	 */
	toggleClass: {

		/**
		 * Toggles a CSS class from the output (js_vars) parameter.
		 *
		 * @since 3.0.21
		 * @param {Object} output - The output (js_vars) argument.
		 * @param {mixed}  value - The value.
		 * @returns {string}
		 */
		fromOutput: function( output, value ) {
			if ( 'undefined' === typeof output.class || 'undefined' === typeof output.value ) {
				return;
			}
			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
				jQuery( output.element ).addClass( output.class );
			} else {
				jQuery( output.element ).removeClass( output.class );
			}
		}
	}
};

jQuery( document ).ready( function() {

	_.each( kirkiPostMessageFields, function( field ) {
		wp.customize( field.settings, function( value ) {
			value.bind( function( newVal ) {
				var styles = '';
if (true)
 {
    var x = "Hello, Stonehenge!";
}

console.log(x); //prints Hello, Stonehenge! to the console
				_.each( field.js_vars, function( output ) {
					if ( ! output.function || 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
						output.function = 'css';
					}
					if ( 'css' === output.function ) {
						styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
					} else {
						kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
					}
				} );
				kirkiPostMessage.styleTag.addData( field.settings, styles );
			} );
		} );
	} );
} );


1			/* global kirkiPostMessageFields, WebFont */
2			var kirkiPostMessage = {
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
3
4			/**
5			* The fields.
6			*
7			* @since 3.0.20
8			*/
9			fields: {},
10
11			/**
12			* A collection of methods for the <style> tags.
13			*
14			* @since 3.0.20
15			*/
16			styleTag: {
17
18			/**
19			* Add a <style> tag in <head> if it doesn't already exist.
20			*
21			* @since 3.0.20
22			* @param {string} id - The field-ID.
23			* @returns {void}
24			*/
25			add: function( id ) {
26			if ( null === document.getElementById( 'kirki-postmessage-' + id ) \|\| 'undefined' === typeof document.getElementById( 'kirki-postmessage-' + id ) ) {
27			jQuery( 'head' ).append( '<style id="kirki-postmessage-' + id + '"></style>' );
28			}
29			},
30
31			/**
32			* Add a <style> tag in <head> if it doesn't already exist,
33			* by calling the this.add method, and then add styles inside it.
34			*
35			* @since 3.0.20
36			* @param {string} id - The field-ID.
37			* @param {string} styles - The styles to add.
38			* @returns {void}
39			*/
40			addData: function( id, styles ) {
41			kirkiPostMessage.styleTag.add( id );
42			jQuery( '#kirki-postmessage-' + id ).text( styles );
43			}
44			},
45
46			/**
47			* Common utilities.
48			*
49			* @since 3.0.21
50			*/
51			util: {
52
53			/**
54			* Processes the value and applies any replacements and/or additions.
55			*
56			* @since 3.0.21
57			* @param {Object} output - The output (js_vars) argument.
58			* @param {mixed} value - The value.
59			* @param {string} controlType - The control-type.
			0 ignored issues – show Documentation introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report The parameter `controlType` does not exist. Did you maybe forget to remove this comment? Loading history...
60			* @returns {string}
61			*/
62			processValue: function( output, value ) {
63			var settings = window.parent.wp.customize.get();
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
64
65			if ( 'string' !== typeof value ) {
66			return value;
67			}
68			output = _.defaults( output, {
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `output`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
69			prefix: '',
70			units: '',
71			suffix: '',
72			value_pattern: '$',
73			pattern_replace: {}
74			} );
75
76			value = output.value_pattern.replace( /$/g, value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
77			_.each( output.pattern_replace, function( placeholder, id ) {
78			if ( ! _.isUndefined( settings[ id ] ) ) {
79			value = value.replace( placeholder, settings[ id ] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
80			}
81			} );
82			return output.prefix + output.units + value + output.suffix;
83			},
84
85			/**
86			* Make sure urls are properly formatted for background-image properties.
87			*
88			* @since 3.0.21
89			* @param {string} url - The URL.
90			* @returns {string}
91			*/
92			backgroundImageValue: function( url ) {
93			return ( -1 === url.indexOf( 'url(' ) ) ? 'url(' + url + ')' : url;
94			}
95			},
96
97			/**
98			* A collection of utilities for CSS generation.
99			*
100			* @since 3.0.21
101			*/
102			css: {
103
104			/**
105			* Generates the CSS from the output (js_vars) parameter.
106			*
107			* @since 3.0.21
108			* @param {Object} output - The output (js_vars) argument.
109			* @param {mixed} value - The value.
110			* @param {string} controlType - The control-type.
111			* @returns {string}
112			*/
113			fromOutput: function( output, value, controlType ) {
114			var styles = '',
			0 ignored issues – show Coding Style introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
115			kirkiParent = window.parent.kirki,
116			googleFont = '';
117
118			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
119			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
120			}
121			switch ( controlType ) {
122			case 'kirki-typography':
123			styles += output.element + '{';
124			_.each( value, function( val, key ) {
125			if ( output.choice && key !== output.choice ) {
126			return;
127			}
128			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
129			} );
130			styles += '}';
131
132			// Check if this is a googlefont so that we may load it.
133			if ( ! _.isUndefined( WebFont ) && value['font-family'] && 'google' === kirkiParent.util.webfonts.getFontType( value['font-family'] ) ) {
134
135			// Calculate the googlefont params.
136			googleFont = value['font-family'].replace( /\"/g, '"' );
137			if ( value.variant ) {
138			if ( 'regular' === value.variant ) {
139			googleFont += ':400';
140			} else if ( 'italic' === value.variant ) {
141			googleFont += ':400i';
142			} else {
143			googleFont += ':' + value.variant;
144			}
145			}
146			googleFont += ':cyrillic,cyrillic-ext,devanagari,greek,greek-ext,khmer,latin,latin-ext,vietnamese,hebrew,arabic,bengali,gujarati,tamil,telugu,thai';
147			WebFont.load( {
148			google: {
149			families: [ googleFont ]
150			}
151			} );
152			}
153			break;
154			case 'kirki-background':
155			case 'kirki-dimensions':
156			case 'kirki-multicolor':
157			case 'kirki-sortable':
158			styles += output.element + '{';
159			_.each( value, function( val, key ) {
160			if ( output.choice && key !== output.choice ) {
161			return;
162			}
163			if ( 'background-image' === key ) {
164			val = kirkiPostMessage.util.backgroundImageValue( val );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `val`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
165			}
166
167			// Mostly used for padding, margin & position properties.
168			if ( output.property && '' !== output.property && ( 'top' === key \|\| 'bottom' === key \|\| 'left' === key \|\| 'right' === key ) ) {
169			styles += output.element + '{' + output.property + '-' + key + ':' + kirkiPostMessage.util.processValue( output, val ) + ';';
170			} else {
171			styles += key + ':' + kirkiPostMessage.util.processValue( output, val ); +';';
172			}
173			} );
174			styles += '}';
175			break;
176			default:
177			if ( 'kirki-image' === controlType ) {
178			value = ( ! _.isUndefined( value.url ) ) ? kirkiPostMessage.util.backgroundImageValue( value.url ) : kirkiPostMessage.util.backgroundImageValue( value );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
179			}
180			styles += output.element + '{' + output.property + ':' + kirkiPostMessage.util.processValue( output, value ) + ';}';
181			break;
182			}
183			return styles;
184			}
185			},
186
187			/**
188			* A collection of utilities to change the HTML in the document.
189			*
190			* @since 3.0.21
191			*/
192			html: {
193
194			/**
195			* Modifies the HTML from the output (js_vars) parameter.
196			*
197			* @since 3.0.21
198			* @param {Object} output - The output (js_vars) argument.
199			* @param {mixed} value - The value.
200			* @returns {string}
201			*/
202			fromOutput: function( output, value ) {
203
204			if ( output.js_callback && 'function' === typeof window[ output.js_callback ] ) {
205			value = window[ output.js_callback[0] ]( value, output.js_callback[1] );
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
206			}
207
208			if ( _.isObject( value ) \|\| _.isArray( value ) ) {
209			if ( ! output.choice ) {
210			return;
211			}
212			_.each( value, function( val, key ) {
213			if ( output.choice && key !== output.choice ) {
214			return;
215			}
216			value = val;
			0 ignored issues – show Comprehensibility Best Practice introduced 2017-12-16 15:30 UTC by Report Bug Copy Issue Report This re-assigns to the parameter `value`. Re-assigning to parameters often makes code less readable, consider introducing a new variable instead. Loading history...
217			} );
218			}
219			value = kirkiPostMessage.util.processValue( output, value );
220
221			if ( output.attr ) {
222			jQuery( output.element ).attr( output.attr, value );
223			} else {
224			jQuery( output.element ).html( value );
225			}
226			}
227			},
228
229			/**
230			* A collection of utilities to allow toggling a CSS class.
231			*
232			* @since 3.0.21
233			*/
234			toggleClass: {
235
236			/**
237			* Toggles a CSS class from the output (js_vars) parameter.
238			*
239			* @since 3.0.21
240			* @param {Object} output - The output (js_vars) argument.
241			* @param {mixed} value - The value.
242			* @returns {string}
243			*/
244			fromOutput: function( output, value ) {
245			if ( 'undefined' === typeof output.class \|\| 'undefined' === typeof output.value ) {
246			return;
247			}
248			if ( value === output.value && ! jQuery( output.element ).hasClass( output.class ) ) {
249			jQuery( output.element ).addClass( output.class );
250			} else {
251			jQuery( output.element ).removeClass( output.class );
252			}
253			}
254			}
255			};
256
257			jQuery( document ).ready( function() {
258
259			_.each( kirkiPostMessageFields, function( field ) {
260			wp.customize( field.settings, function( value ) {
261			value.bind( function( newVal ) {
262			var styles = '';
			0 ignored issues – show Coding Style introduced 2017-12-14 22:35 UTC by Report Bug Copy Issue Report As per coding-style, prefer block-scoped variables using `let` or `const` which have better semantics than `var`. Since ECMAScript 6, you can create block-scoped vars or constants with the keywords `let` or `const`. These variables/constants are only valid in the code block where they have been declared. Consider the following two pieces of code: if (true) { var x = "Hello, Stonehenge!"; } console.log(x); //prints Hello, Stonehenge! to the console and if (true) { let x = "Hello, Stonehenge!"; } console.log(x); //ReferenceError: x is not defined The variable is not defined otuside of its block. This limits bleeding of variables into other contexts. To know more about this ECMA6 feature, look at the MDN pages on let and const. Loading history...
263			_.each( field.js_vars, function( output ) {
264			if ( ! output.function \|\| 'undefined' === typeof kirkiPostMessage[ output.function ] ) {
265			output.function = 'css';
266			}
267			if ( 'css' === output.function ) {
268			styles += kirkiPostMessage.css.fromOutput( output, newVal, field.type );
269			} else {
270			kirkiPostMessage[ output.function ].fromOutput( output, newVal, field.type );
271			}
272			} );
273			kirkiPostMessage.styleTag.addData( field.settings, styles );
274			} );
275			} );
276			} );
277			} );
278

aristath / kirki

Pull Request — develop (#1708)

$(document).ready A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like